<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
	<!-- Safari为meta标签新增minimal-ui属性，在网页加载时隐藏地址栏与导航栏 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minxmum-scale=1.0, user-scalable=no, minimal-ui">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta name="format-detection" content="telephone=no">
	<meta name="full-screen" content="yes">
	<meta name="x5-fullscreen" content="true">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-control" content="no-cache">
	<meta http-equiv="Cache" content="no-cache">
	<title>东湖绿道</title>
	<link rel="stylesheet" href="<?=HW_STA?>weixin/css/weuix.min.css"/>
	<link rel="stylesheet" type="text/css" href="<?=HW_STA?>weixin/css/style.css">
	<link rel="stylesheet" href="<?=HW_CSS?>AppFont/iconfont.css">
	<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.4.0/weui.min.css">

</head>
<body class='step'>
	<div class="dh-header">
		<div class="left" onclick="javascript:history.go(-1);">
			<i class="iconfont">&#xe81f;</i>
		</div>
		<div class="center">
			当前步数
		</div>
		<div class="right" id='share'>
			<i class="iconfont green">&#xe823;</i>
		</div>
	</div>
	<div class="step-data">
		<div class="step-data__sum grey">
			<span class="green"><?=$step['step']?></span>步
		</div>
		<div class="step-data__statictis">
			<div class="step-data__statictis-item">
				<small>时长</small>
				<span><?=date('H:i:s',strtotime('Y-m-d')+$step['time'])?></span>
			</div>
			<div class="step-data__statictis-item">
				<small>距离(米)</small>
				<span><?=$step['distance']?></span>
			</div>
			<div class="step-data__statictis-item">
				<small>卡路里</small>
				<span><?=$step['cal']?></span>
			</div>
		</div>
	</div>
	<?if($info['is_online']==1):?>
	<div class="step-rank">
		<div class="step-rank__header">当前步数排名</div>
		<div class="step-rank__user">
			<div class="step-rank__user-msg">
				<div class="step-rank__user-avatar">
					<img src="<?=$info['headimgurl']?>" alt="">	
				</div>
				<div class="step-rank__user-name">
					<?=$info['nickname']?>
				</div>
			</div>
			<div class="step-rank__detail grey">
				<?if($sort>3):?>
				<div class="green"><?=$step?></div>
				<i class="iconfont">&#xe822;</i>
				<?endif;?>
				<?if($sort==1):?>
				<div class="gold">1</div>
				<img src="<?=HW_IMG?>gold.png" alt="" class="medal">
				<?endif;?>
			</div>
		</div>
		<?if($sort>1):?>
		<div class="step-rank__tip grey">
			距离上一名还差<span class="green"><?=$last_step?></span>步
		</div>
		<?endif;?>
	</div>
	<?endif;?>
	<div class="step-cartgory">
		<div class="step-cartgory__header">步数柱状图</div>
		<div class="step-cartgory__detail">
			<div class="step-cartgory__detail-item">
				<div class="step-cartgory__detail-statictis-white" style="height: 4.5rem"></div>
				<div class="step-cartgory__detail-statictis"  style="height: 0rem"></div>
				<div class="step-cartgory__detail-border"></div>
				<div class="step-cartgory__detail-time">00:00</div>
			</div>
			<div class="step-cartgory__detail-item">
				<div class="step-cartgory__detail-statictis-white" style="height: 4.5rem"></div>
				<div class="step-cartgory__detail-statictis" style="height: 0rem"></div>
				<div class="step-cartgory__detail-border"></div>
				<div class="step-cartgory__detail-time">02:00</div>
			</div>
			<div class="step-cartgory__detail-item">
				<div class="step-cartgory__detail-statictis-white" style="height: 4.5rem"></div>
				<div class="step-cartgory__detail-statictis" style="height: 0rem"></div>
				<div class="step-cartgory__detail-border"></div>
				<div class="step-cartgory__detail-time">04:00</div>
			</div>
			<div class="step-cartgory__detail-item">
				<div class="step-cartgory__detail-statictis-white" style="height: 3.3rem"></div>
				<div class="step-cartgory__detail-statictis" style="height: 1.2rem"></div>
				<div class="step-cartgory__detail-border"></div>
				<div class="step-cartgory__detail-time">06:00</div>
			</div>
			<div class="step-cartgory__detail-item">
				<div class="step-cartgory__detail-statictis-white" style="height: 2.7rem"></div>
				<div class="step-cartgory__detail-statictis" style="height: 1.8rem"></div>
				<div class="step-cartgory__detail-border"></div>
				<div class="step-cartgory__detail-time">08:00</div>
			</div>
			<div class="step-cartgory__detail-item">
				<div class="step-cartgory__detail-statictis-white" style="height: 2.3rem"></div>
				<div class="step-cartgory__detail-statictis" style="height: 2.2rem"></div>
				<div class="step-cartgory__detail-border"></div>
				<div class="step-cartgory__detail-time">10:00</div>
			</div>
			<div class="step-cartgory__detail-item">
				<div class="step-cartgory__detail-statictis-white" style="height: 2.2rem"></div>
				<div class="step-cartgory__detail-statictis" style="height: 2.3rem"></div>
				<div class="step-cartgory__detail-border"></div>
				<div class="step-cartgory__detail-time">12:00</div>
			</div>
			<div class="step-cartgory__detail-item">
				<div class="step-cartgory__detail-statictis-white" style="height: 2.7rem"></div>
				<div class="step-cartgory__detail-statictis" style="height: 1.8rem"></div>
				<div class="step-cartgory__detail-border"></div>
				<div class="step-cartgory__detail-time">14:00</div>
			</div>
			<div class="step-cartgory__detail-item">
				<div class="step-cartgory__detail-statictis-white" style="height: 1.5rem"></div>
				<div class="step-cartgory__detail-statictis" style="height: 3.0rem"></div>
				<div class="step-cartgory__detail-border"></div>
				<div class="step-cartgory__detail-time">16:00</div>
			</div>
			<div class="step-cartgory__detail-item">
				<div class="step-cartgory__detail-statictis-white" style="height: 0.7rem"></div>
				<div class="step-cartgory__detail-statictis" style="height: 3.8rem"></div>
				<div class="step-cartgory__detail-border"></div>
				<div class="step-cartgory__detail-time">18:00</div>
			</div>
			<div class="step-cartgory__detail-item">
				<div class="step-cartgory__detail-statictis-white" style="height: 0.5rem"></div>
				<div class="step-cartgory__detail-statictis" style="height: 4.0rem"></div>
				<div class="step-cartgory__detail-border"></div>
				<div class="step-cartgory__detail-time">20:00</div>
			</div>
			<div class="step-cartgory__detail-item">
				<div class="step-cartgory__detail-statictis-white" style="height: 2.7rem"></div>
				<div class="step-cartgory__detail-statictis" style="height: 1.8rem"></div>
				<div class="step-cartgory__detail-border"></div>
				<div class="step-cartgory__detail-time">22:00</div>
			</div>
			<div class="step-cartgory__detail-item">
				<div class="step-cartgory__detail-statictis-white" style="height: 4.5rem"></div>
				<div class="step-cartgory__detail-statictis" style="height: 0rem"></div>
				<div class="step-cartgory__detail-border"></div>
				<div class="step-cartgory__detail-time">24:00</div>
			</div>
		</div>
	</div>
	<div class="shade">
		<img src="<?=HW_IMG?>share.png" alt="">
	</div>
</body>
<script type="text/javascript" src="<?=HW_JS?>jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="<?=HW_STA?>weui/weui.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="<?=HW_JS?>rem.js"></script>
<script>
	$("#share").click(function(){
		$(".shade").show()
	})
	$('body').on("click", ".shade", function(){
		$(".shade").hide()
	})
</script>
</html>

